<template>
  <div class="page">
    <el-page-header @back="goBack" content="订单列表"> </el-page-header>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-descriptions title="社保">
              <el-descriptions-item label="社保个人医疗">{{
                props.row.personSocialSecurityMedical
              }}</el-descriptions-item>
              <el-descriptions-item label="社保个人养老">{{
                props.row.personSocialSecurityRetirement
              }}</el-descriptions-item>
              <el-descriptions-item label="社保个人失业">{{
                props.row.personSocialSecurityUnemployment
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司医疗">{{
                props.row.companySocialSecurityMedical
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司养老">{{
                props.row.companySocialSecurityRetirement
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司失业">{{
                props.row.companySocialSecurityUnemployment
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司工伤">{{
                props.row.companySocialSecurityIndustrialInjury
              }}</el-descriptions-item>
              <el-descriptions-item label="社保残保金公司">{{
                props.row.companySocialSecurityDisabilityBenefits
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="其他">
              <el-descriptions-item label="滞纳金">{{
                props.row.lateFee
              }}</el-descriptions-item>
              <el-descriptions-item label="公积金个人">{{
                props.row.personFund
              }}</el-descriptions-item>
              <el-descriptions-item label="公积金企业">{{
                props.row.companyFund
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="调基补差预收">
              <el-descriptions-item label="社保个人医疗">{{
                props.row.advancePersonSocialSecurityMedical
              }}</el-descriptions-item>
              <el-descriptions-item label="社保个人养老">{{
                props.row.advancePersonSocialSecurityRetirement
              }}</el-descriptions-item>
              <el-descriptions-item label="社保个人失业">{{
                props.row.advancePersonSocialSecurityUnemployment
              }}</el-descriptions-item>
              <el-descriptions-item label="社保个人大额医疗">{{
                props.row.advancePersonSocialSecurityBigMedical
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司医疗">{{
                props.row.advanceCompanySocialSecurityMedical
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司补充医疗">{{
                props.row.advanceCompanySocialSecuritySupplementaryMedical
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司养老">{{
                props.row.advanceCompanySocialSecurityRetirement
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司失业">{{
                props.row.advanceCompanySocialSecurityUnemployment
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司工伤">{{
                props.row.advanceCompanySocialSecurityIndustrialInjury
              }}</el-descriptions-item>

              <el-descriptions-item label="社保公司生育">{{
                props.row.advanceCompanySocialSecurityBearing
              }}</el-descriptions-item>
              <el-descriptions-item label="社保公司大额医疗">{{
                props.row.advanceCompanySocialSecurityBigMedical
              }}</el-descriptions-item>
              <el-descriptions-item label="残保金公司">{{
                props.row.advanceCompanySocialSecurityDisabilityBenefits
              }}</el-descriptions-item>

              <el-descriptions-item label="滞纳金">{{
                props.row.advanceLateFee
              }}</el-descriptions-item>
              <el-descriptions-item label="公积金个人">{{
                props.row.advancePersonFund
              }}</el-descriptions-item>
              <el-descriptions-item label="公积金公司">{{
                props.row.advanceCompanyFund
              }}</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column label="子订单ID" prop="orderId"> </el-table-column>
        <el-table-column label="企业名称" prop="companyName"> </el-table-column>
        <el-table-column label="姓名" prop="personName"> </el-table-column>
        <el-table-column label="身份证" prop="idCard"> </el-table-column>
        <el-table-column label="工资" prop="basicWages"></el-table-column>
        <el-table-column label="实缴月份" prop="payMonth"> </el-table-column>
        <el-table-column label="社保基数" prop="baseSocialSecurity">
        </el-table-column>

        <el-table-column label="公积金基数" prop="baseFund"> </el-table-column>
        <el-table-column label="详情" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="detail(scope.row.orderId)"
              >查看</el-button
            >
            <el-button
              type="success"
              size="mini"
              title="导出订单"
              :loading="outInutLoading"
              @click="exportData(scope.row)"
            >
              订单导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="$route.query.personId"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[6, 12, 24, 36]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import base from "@/assets/js/base";
import { requestApiPost, requestApiFilePost,requestApiExportOrder } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  data() {
    return {
      tableData: [],
      current: 1,
      pageSize: 6,
      total: null,
      loading: false,
      outInutLoading: false,
    };
  },
  methods: {
    /**导出 */
    exportData(item) {
      this.outInutLoading = true;
      var reqData = {
        payMonth: item.payMonth,
        companyId: item.companyId,
        companyName: item.companyName,
      };
      let url = requestApiExportOrder(reqData);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link); // 下载完成移除元素
      window.URL.revokeObjectURL(url); // 释放掉blob对象
      this.outInutLoading = false;
    },
    handleCurrentChange(e) {
      this.current = e;
      this.retrieveEmployeeOrderList();
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.retrieveEmployeeOrderList();
    },

    /**获取子订单列表 */
    getData() {
      this.loading = true;
      var reqData = {
        orderId: this.$route.query.orderId, //201208
      };
      let reqReport = reqRep({
        traCode: "_LIST_CHILDREN_ORDER_1",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        this.loading = false;
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.tableData = resReport.data;
          console.log(this.tableData);
        }
      });
    },

    /**获取员工订单列表 */
    retrieveEmployeeOrderList() {
      this.loading = true;
      var reqData = {
        personId: this.$route.query.personId,
        current: this.current,
        size: this.pageSize,
      };
      let reqReport = reqRep({
        traCode: "_PERSON_ORDER_LIST",
        data: reqData,
      });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        this.loading = false;
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.tableData = resReport.data.records;
          this.total = resReport.data.total;
        }
      });
    },

    //详情
    detail(orderId) {
      this.$router.push({
        path: "/billInfo",
        query: { orderId },
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    if (this.$route.query.personId) {
      this.retrieveEmployeeOrderList();
    }
    if (this.$route.query.orderId) {
      this.getData();
    }
  },
};
</script>
<style scoped>
.page {
  padding: 20px;
}
.table-box {
  margin-top: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>